<template>
    <div>
        <Tabs value="name1"  @on-click='get'>

            <TabPane label="新闻管理" name="new" active-class="active">
                <Button type="info"  @click='add'>添加按钮</Button>
                <Button type="success" @click="change">修改按钮</Button>
                <Button type="error" @click="remove">删除按钮</Button>
                <Tree :data="data1" ref="tree" @on-select-change="selectChange"></Tree>
            </TabPane>

            <TabPane label="上传管理" name="upload" active-class="active">
                <Button type="info"  @click='add'>添加按钮</Button>
                <Button type="success" @click="change">修改按钮</Button>
                <Button type="error" @click="remove">删除按钮</Button>
                <Tree :data="data1" ref="tree" @on-select-change="selectChange"></Tree>
            </TabPane>

            <TabPane label="产品管理" name="product" active-class="active">
                <Button type="info"  @click='add'>添加按钮</Button>
                <Button type="success" @click="change">修改按钮</Button>
                <Button type="error" @click="remove">删除按钮</Button>
                <Tree :data="data1" ref="tree" @on-select-change="selectChange"></Tree>
            </TabPane>

        </Tabs>

        <!--提示框-->
        <Modal
                v-model="modal"
                title="数据操作"
               >
            {{formValidate.type}}
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="标题" prop="title">
                    <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
                </FormItem>
                <FormItem label="类型" prop="type">
                    <Input v-model="formValidate.type" placeholder="请输入标题"></Input>
                </FormItem>
                <FormItem >
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>

            </Form>

        </Modal>



    </div>
</template>
<script>
	import Base from './../common/base';
	export default {
		mixins:[Base],
		data () {
			return {
				module:'cate',
				formValidate: {
					title: '',
					type:'new'
				},
				ruleValidate: {
					title: [
						{ required: true, message: '标题不能为空', trigger: 'blur' }
					]
				},
				data1: []
			}
		},
        methods:{
			getData(){
                    this.$http.post(`http://localhost:3000/cate/list/${this.formValidate.type}`)
                    .then(res=>{
						this.data1 = res.data;
					})
            },

			handleSubmit (name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						if(this.formValidate._id && this.formValidate._id.length>0){
							//修改
							this.$http.put(`http://localhost:3000/cate/data/${this.formValidate._id}`,this.formValidate)
								.then(res=>{
									this.$Message.success('提交成功!');
									this.modal = false;
									this.getData();
                                    /*清空表单*/
									let aa = this.$data.formValidate.type
									Object.assign(this.$data.formValidate,this.$options.data().formValidate);
									this.$data.formValidate.type=aa;
								})
						}else{
							//添加
//							console.log(123);
							console.log(this.formValidate);
							this.$http.post('http://localhost:3000/cate/data',this.formValidate)
								.then(res=>{
									console.log(this.formValidate);
									this.$Message.success('提交成功!');
									this.modal = false;
									this.getData();
									//删除残留的parentId
									delete this.formValidate.parentId
                                    /*清空表单*/
									let aa = this.$data.formValidate.type
									Object.assign(this.$data.formValidate,this.$options.data().formValidate);
									this.$data.formValidate.type=aa;
								})
						}
					} else {
						this.$Message.error('表单验证失败!');
					}
				})
			},

            //修改
			change(){

				//给表单赋值选中的数据
                if( this.$refs.tree.getSelectedNodes()[0]){
					this.modal = true;
					this.formValidate = this.$refs.tree.getSelectedNodes()[0];
					console.log(this.formValidate);
				}else{
					this.$Modal.warning({
						title: '提醒',
						content: '请选择你要修改的数据'
					});
                }
			},

            //删除
			remove () {
				if(this.$refs.tree.getSelectedNodes()[0]){
					let id = this.$refs.tree.getSelectedNodes()[0]._id;
					this.$Modal.confirm({
						title: '确认删除数据',
						content: '<p>确认删除该数据吗</p>',
						onOk: () => {
							this.$Message.info('删除成功');
							this.$http.delete(`http://localhost:3000/cate/data/${id}`)
								.then((res)=>{
//								console.log(res);
									this.getData();
								})
						},
						onCancel: () => {
						}
					});
                }else{
					this.$Modal.error({
						title: '提醒',
						content: '请选择你要删除的数据'
					});
                }

			},
			ok () {
				this.$Message.info('删除成功');
			},
            get(page){
//				console.log(page);
				this.formValidate.type = page;
//				console.log(this.formValidate);
				this.getData();
				this.formValidate.type = page;
			},
			selectChange(row){
//				console.log(row);
                if(row && row.length>0){
					this.formValidate.parentId = row[0]._id;
                }

            },
			add(){

//					this.formValidate = this.$options.data().formValidate;

				this.modal = true;

//                对象合并，并且初始表单数据
				delete(this.$data.formValidate._id);

			},
        }
	}
</script>
